<template>
	<view class="my-page">
		<!-- 设置按钮 -->
		<view class="settings-btn" @tap="goToSettings">
			<image src="/static/settings.png" mode="aspectFit"></image>
		</view>
		
		<!-- 用户信息 -->
		<view class="user-info">
			<image class="avatar" src="/static/squirrel.png" mode="aspectFit"></image>
			<text class="nickname">{{username}}</text>
		</view>
		
		<!-- 成就卡片列表 -->
		<view class="achievement-list">
			<!-- 获得成就卡片 -->
			<view class="achievement-card">
				<view class="card-header">
					<text class="title">获得成就</text>
					<text class="more" @tap="goToAchievement">更多 ></text>
				</view>
				<view class="badge-group">
					<view class="badge-item bronze">
						<view class="badge-bg"></view>
						<image src="/static/achievement.png" mode="aspectFit"></image>
						<text>初级卷卷</text>
					</view>
					<view class="badge-item silver">
						<view class="badge-bg"></view>
						<image src="/static/achievement.png" mode="aspectFit"></image>
						<text>好好学力</text>
					</view>
				</view>
			</view>
			
			<!-- 累计单词卡片 -->
			<view class="achievement-card word-count">
				<view class="count-item">
					<view class="left">
						<image class="crown" src="/static/achievement.png" mode="aspectFit"></image>
						<text class="label">累计单词</text>
					</view>
					<text class="number">1个</text>
				</view>
			</view>
			
			<!-- 推荐给好友卡片 -->
			<view class="achievement-card recommend">
				<view class="recommend-item">
					<view class="left">
						<image class="share-icon" src="/static/trophy.png" mode="aspectFit"></image>
						<text class="label">推荐给好友</text>
					</view>
					<text class="arrow">></text>
				</view>
			</view>
		</view>
		
		<!-- 底部装饰图片 -->
		<view class="bottom-decoration">
			<image class="squirrel-deco" src="/static/squirrel.png" mode="aspectFit"></image>
		</view>
		
		<!-- 版本信息 -->
		<view class="version-info">
			<text>更多待完成</text>
			<text>Version 1.0.0</text>
		</view>
		
		<!-- 底部导航栏 -->
		<view class="tab-bar">
			<view class="tab-item" @tap="goToMain">
				<view class="icon-wrapper">
					<image src="/static/main.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="tab-item" @tap="goToList">
				<view class="icon-wrapper">
					<image src="/static/trophy.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="tab-item active">
				<view class="icon-wrapper">
					<image src="/static/achievement.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {ref} from'vue';
	
const username=ref('')	
username.value=localStorage.getItem("username")
console.log(uni.getStorageSync("username"),"000");
// 页面跳转
const goToMain = () => {
	uni.redirectTo({ url: '/pages/main/main' })
}

const goToList = () => {
	uni.redirectTo({ url: '/pages/list/list' })
}

// 跳转到设置页面
const goToSettings = () => {
	uni.navigateTo({
		url: '/pages/settings/settings'
	})
}

// 跳转到成就页面
const goToAchievement = () => {
	uni.navigateTo({
		url: '/pages/achievement/achievement'
	})
}
</script>

<style lang="scss">
.my-page {
	min-height: 100vh;
	background-color: #E8F6F6;
	padding: 50rpx 30rpx;
	padding-top: 100rpx;
	padding-bottom: 120rpx;
	position: relative;
}

// 设置按钮样式
.settings-btn {
	position: absolute;
	top: 50rpx;
	right: 30rpx;
	width: 48rpx;
	height: 48rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	
	image {
		width: 100%;
		height: 100%;
		opacity: 0.8;
	}
}

.user-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 50rpx;
	
	.avatar {
			border: 3px solid #fff;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin-bottom: 20rpx;
	}
	
	.nickname {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
	}
}

.achievement-list {
	.achievement-card {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 24rpx;
		margin-bottom: 30rpx;
		
		// 累计单词卡片样式
		&.word-count {
			padding: 50rpx 30rpx;
			
			.count-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.left {
					display: flex;
					align-items: center;
					gap: 12rpx;
					
					.crown {
						width: 48rpx;
						height: 48rpx;
						margin-right: 12rpx;
					}
					
					.label {
						font-size: 34rpx;
						color: #333;
						font-weight: bold;
					}
				}
				
				.number {
					font-size: 34rpx;
					font-weight: bold;
					color: #333;
				}
			}
		}
		
		// 推荐好友卡片样式
		&.recommend {
			padding: 50rpx 30rpx;
			
			.recommend-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.left {
					display: flex;
					align-items: center;
					position: relative;
					
					.share-icon {
						width: 48rpx;
						height: 48rpx;
						margin-right: 12rpx;
						opacity: 0.8;
					}
					
					.label {
						font-size: 34rpx;
						color: #333;
						font-weight: bold;
					}
				}
				
				.arrow {
					font-size: 32rpx;
					color: #666;
				}
			}
		}
		
		.card-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;
			
			.title {
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
			}
			
			.more {
				font-size: 26rpx;
				color: #666;
			}
		}
		
		.badge-group {
			display: flex;
			gap: 30rpx;
			
			.badge-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;
				padding: 16rpx;
				border-radius: 12rpx;
				width: 100rpx;
				height: 100rpx;
				box-sizing: border-box;
				
				.badge-bg {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					border-radius: 12rpx;
					opacity: 0.08;
				}
				
				&.bronze .badge-bg {
					background: #FFA07A;
				}
				
				&.silver .badge-bg {
					background: #C0C0C0;
				}
				
				image {
					width: 60rpx;
					height: 60rpx;
					margin-bottom: 4rpx;
					position: relative;
					z-index: 1;
				}
				
				text {
					font-size: 22rpx;
					color: #666;
					position: relative;
					z-index: 1;
					white-space: nowrap;
					transform: scale(0.9);
				}
			}
		}
	}
}

.bottom-decoration {
	position: relative;
	height: 200rpx;
	margin-top: 50rpx;
	
	.squirrel-deco {
		position: absolute;
		right: 40rpx;
		bottom: 0;
		width: 160rpx;
		height: 160rpx;
		opacity: 0.6;
		transform: scaleX(-1) translateY(150px);  // 水平翻转
		// transform: ;
	}
}

.version-info {
	text-align: center;
	margin-top: 240rpx;
	
	text {
		display: block;
		font-size: 24rpx;
		color: #999;
		line-height: 2;
	}
}

.tab-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background: #FFFFFF;
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 0 30rpx;
	padding-bottom: env(safe-area-inset-bottom);
	box-shadow: 0 -1rpx 6rpx rgba(0, 0, 0, 0.05);
	z-index: 1;
	
	.tab-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 10rpx;
		
		.icon-wrapper {
			width: 100rpx;
			height: 70rpx;
			background-color: #5CD3D3;
			border-radius: 16rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			opacity: 0.9;
		}
		
		image {
			width: 40rpx;
			height: 40rpx;
		}
		
		&.active .icon-wrapper {
			opacity: 1;
		}
	}
}
</style>
